<template>
  <view class="flex m-t20">
    <image class="avatar" :src="avatar" mode="aspectFill" @click="gotoUrl" />

    <view class="flex-1 flex-d-lc m-l20" @click="gotoUrl">
      <text class="text-700-132">{{ userInfo.nickname }}</text>
      <text class="m-t8 text-400-124"
        >{{ getWorkTimesLabel(userInfo.work) }} /
        {{ userInfo.highest_education }} / {{ age }}</text
      >
    </view>
    <view class="change-user" @click="logout">
      <image class="square-26" src="@/static/images/mine/switch.png" />
      <text class="m-l10 text-400-226">切换到企业</text>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { computed } from "vue";
import { genStaticUrl } from "@/utils/utils";
import { useUserStore, useCommonStore } from "@/stores/user";
const { getWorkTimesLabel } = useCommonStore();
const { userInfo } = useUserStore();

const avatar = computed(() => {
  if (userInfo.avatar.startsWith("/")) {
    return genStaticUrl(userInfo.avatar);
  }

  return userInfo.avatar;
});
function logout() {
  uni.showModal({
    title: "提示",
    content: "确定要切换到企业吗？",
    success: (res) => {
      if (res.confirm) {
        uni.redirectTo({ url: "/pages/user/login/login?role=1" });
      }
    },
  });
}
function gotoUrl() {
  uni.navigateTo({ url: "/pages_site/pages/home/home" });
}
const age = computed(() => {
  let ret = "--";
  try {
    if (userInfo.birthday) {
      const years = Math.floor(
        (Date.now() - Number(new Date(userInfo.birthday))) /
          (365 * 24 * 60 * 60 * 1000)
      );
      ret = `${years}岁`;
    }
  } catch (_) {}

  return ret;
});
if (!userInfo.nickname) {
  uni.redirectTo({ url: "/pages/user/role/role" });
  uni.removeStorageSync("token");
}
</script>

<style lang="scss" scoped>
.avatar {
  width: 108rpx;
  height: 108rpx;
  border-radius: 50%;
}
.change-user {
  filter: invert(1);
  display: flex;
  align-items: center;
}
</style>
